<template>
  <div class="questionsBox">
    <div class="search">
      <el-input placeholder="请输入关键词" v-model="search" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="searchC">搜索</el-button>
      </el-input>
    </div>
    <div class="uploadResources">
      <!-- <el-button type="warning" size="mini" @click="goPutQuestions">提问</el-button> -->
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="他的贴" name="meInvitation">
        <div class="questionList">
          <div
            class="list"
            @click="goAnswering(item)"
            v-for="(item, index) in invitationList"
            :key="index"
          >
            <div class="menuList">
              <span>{{ item.content }}</span>
              <div class="listInfo">
                <label>作者:{{ item.username }}</label>
                <label>点击:{{ item.hitses }}</label>
                <label>发帖时间:{{ item.creationtime }}</label>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="全部贴" name="allMeInvitation">
        <div class="questionList">
          <div
            class="list"
            @click="goAnswering((item))"
            v-for="(item, index) in invitationList"
            :key="index"
          >
            <div class="menuList">
              <span>{{ item.title }}</span>
              <div class="listInfo">
                <label>作者:{{ item.username }}</label>
                <label>点击:{{ item.hitses }}</label>
                <label>发帖时间:{{ item.creationtime }}</label>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <div class="sortOrder">
      <el-dropdown placement="bottom" trigger="click" @command="handleCommand">
        <label>
          {{ sorting }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </label>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">按点击量升序</el-dropdown-item>
          <el-dropdown-item command="2">按点击量降序</el-dropdown-item>
          <el-dropdown-item command="3">最新帖子在前</el-dropdown-item>
          <el-dropdown-item command="4">最新贴子在后</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="timeSelection">
      <label>发帖时间</label>
      <el-date-picker
        @change="dateTimeChange"
        v-model="dateTime"
        type="month"
        value-format="yyyy-MM"
        size="small"
        placeholder="选择日期"
      ></el-date-picker>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      otherUserInfo: state => state.userModule.otherUserInfo
    })
  },
  created() {
    if (this.otherUserInfo.userid) {
      this.userId = this.otherUserInfo.userid;
    }
    this.handleGetInvitationList();
  },
  data() {
    return {
      search: "",
      activeName: "meInvitation",
      sorting: "排序方式",
      ascType: 2, // 排序方式
      dateTime: "", // 发帖时间
      total: 40, // 列表总数
      page: 1, // 当前页
      pageSize: 10, // 每页显示列表条数
      userId: null, //用户ID
      tabFlag: 0, // Tabs 切换标识
      invitationList: []
    };
  },

  methods: {
    dateTimeChange(val){
        this.handleGetInvitationList()
    },
    // 搜索时根据关键字过滤
    searchC() {
      this.handleGetInvitationList();
    },
    // 提问
    goPutQuestions() {
      this.$router.push({
        path: "studentPutQuestions"
      });
    },

    // 帖子详情
    goAnswering(params) {
      this.$router.push({
        path: "/otherZone/otherZoneAnswering",
        query: {
           answering: params,
           id: params.id
        }
      });
    },

    // 分类切换
    handleClick(t, e) {
      if (t.index !== this.tabFlag) {
        this.tabFlag = t.index;
      }
      // 因为当前未做正式登陆暂时登陆信息没有用
      if (t.name === "meInvitation") {
        this.userId = this.otherUserInfo.userid;
        this.handleGetInvitationList();
      } else {
        this.userId = "";
        this.handleGetInvitationList();
      }
    },

    // 切换每页显示条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleGetInvitationList();
    },

    // 当前页
    handleCurrentChange(val) {
      this.page = val;
      this.handleGetInvitationList();
    },

    // 选择排序方式
    handleCommand(command) {
        // 判断用户单击上分为同一个
        if (this.ascType !== command * 1) {
            this.ascType = command * 1;
            if (command * 1 === 1) {
                this.sorting = "按点击量升序";
            } else if (command * 1 === 2) {
                this.sorting = "按点击量降序";
            } else if (command * 1 === 3) {
                this.sorting = "最新贴子在前";
            } else {
                this.sorting = "最新贴子在后";
            }
            this.handleGetInvitationList();
        }
    },

    // 获取帖子列表
    handleGetInvitationList() {
      const loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)"
      });
      /**
       * 获取帖子列表
       * @param ascType：排序方式，1 点击量升序 ，2 点击量降序 ，3 最新帖子在前，4 最新贴子在后
       * @param datetime：发帖时间(2020-03)
       * @param page:当前页
       * @param pageSize：每页显示条数
       * @param userId: 用户ID ， 全部贴子则为空
       */
      this.$store
        .dispatch("invitationModule/getInvitationList", {
          search: this.search,
          ascType: this.ascType === 0 ? 1 : this.ascType,
          datetime: this.dateTime,
          page: this.page,
          pageSize: this.pageSize,
          userId: this.userId
        })
        .then(res => {
          if (res.data.code === 200) {
            this.invitationList = res.data.result.list;
            this.total = res.data.result.total;
          }
          loading.close();
        })
        .catch(error => {
          this.$message.error("服务器内部错误");
          loading.close();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.questionsBox {
  overflow: hidden;
  padding: 10px;
  position: relative;
  background-color: white;

  .sortOrder {
    position: absolute;
    top: 80px;
    left: 170px;

    label {
      color: #303133;
      cursor: pointer;
    }
  }

  .timeSelection {
    position: absolute;
    top: 65px;
    right: 20px;

    label {
      font-size: 14px;
      color: #303133;
      margin-right: 10px;
    }
  }

  .search {
    width: 290px;
    margin-bottom: 20px;
  }

  .uploadResources {
    position: absolute;
    right: 20px;
    top: 20px;
  }

  .questionList {
    overflow: hidden;
    background: #fff;
    padding: 10px;
    border-radius: 4px;

    .list {
      background: #fff;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 15px;

      &:hover {
        background: #66ccff;
        color: #fff;
        cursor: pointer;
      }

      .menuList {
        border-bottom: 1px dashed #ccc;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-size: 14px;
        overflow: hidden;

        span {
          display: block;
          float: left;
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .listInfo {
          float: right;
          color: #ccc;

          label {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>